<!--
 * @Author: java_hongwx@163.com
 * @Date: 2025-02-13 09:08:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-07-22 10:17:45
 * @FilePath: PreviewModule.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <el-scrollbar ref="scrollbarRef"> -->
  <el-row class="msg-list-box">
    <div class="msg-compair-box wow animate__animated animate__fadeInUpBig">
      <el-col :span="24" class="title-box">
        {{ props.editInfo.title }}
      </el-col>
      <el-col :span="24">
        <el-row class="user-date-size">
          <el-col :span="8" class="row align-items">
            <!-- <div class="flex1">
            来源：东莞松山湖未来学校
          </div> -->
            <div class="flex1"><label style="text-align: left;width: 100%;">作者：{{
              props.editInfo.publisher_name }}</label></div>
          </el-col>
          <el-col :span="8" class="date-align-items">发布：{{ props.editInfo.publish_date }}</el-col>
          <el-col :span="8" class="flex-end row">
            字号：
            <div class="font-size-box" :class="Number(fontSize) == Number(item.val) ? 'font-is-active' : ''
              " v-for="(item, index) in fontList" :key="index" @click="toChangeSize(item.val)">
              {{ item.name }}
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 文章展示区 -->
      <el-col :span="24" class="msg-show-box" :style="'font-size:' + fontSize + 'px;'" v-html="props.editInfo.content">
      </el-col>
      <!-- 附件展示 -->
      <div class="fileBox" v-if="props.attachs.length > 0">
        <div class="title">附件</div>
        <div class="lists">
          <div class="item" v-for="(item, index) in props.attachs" :key="index">
            <div class="fileInfo">
                <svg class="icon svg-icon" aria-hidden="true" style="width: 18px;height: 20px;">
                    <use v-if="item.ext == 'pdf'" xlink:href="#icon-pdf"></use>
                    <use v-else-if="item.ext == 'jpg' || item.ext == 'png' ||item.ext == 'jpeg'" xlink:href="#icon-jpg_png"></use>
                    <use v-else-if="item.ext == 'ppt'" xlink:href="#icon-ppt"></use>
                    <use v-else-if="item.ext == 'doc' || item.ext == 'docx'" xlink:href="#icon-doc"></use>
                    <use v-else-if="item.ext == 'xls' || item.ext == 'xlsx'" xlink:href="#icon-xls"></use>
                    <use v-else-if="item.ext == 'txt'" xlink:href="#icon-txt"></use>
                    <use v-else-if="item.ext == 'mp4'||item.ext == 'mvk'||item.ext == 'mov'" xlink:href="#icon-shipinwenjian"></use>
                    <use v-else xlink:href="#icon-zip"></use>
                </svg>
                <div>
                    <span>{{ item.real_name }}</span>
                    <span>（{{ $util.formatFileSize(item.size) }}）</span>
                </div>
            </div>
            <div class="btnBox">
              <span
                v-if="item.ext == 'jpg' || item.ext == 'png' || item.ext == 'jpeg'||item.ext == 'mp4'||item.ext == 'mvk'||item.ext == 'mov'"
                @click="Preview(item)">预览</span>
              <span
                @click="Download(item.url, item.name)">下载</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-row>
</template>
<script lang="ts" setup>
import { onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import $util from '../../../util/util'
import doc from '../../../assets/images/doc.png'
import jpg_png from '../../../assets/images/jpg_png.png'
import pdf from '../../../assets/images/pdf.png'
import ppt from '../../../assets/images/ppt.png'
import xls from '../../../assets/images/xls.png'
import zip from '../../../assets/images/zip.png'
interface PropsType {
  editInfo?: any
  attachs?: any
}
const props = withDefaults(defineProps<PropsType>(), {
  editInfo: {},
  attachs: []
})
interface EmitType {
  // (e: 'modelCancel'): void
  // (e: 'getList'): void
}
const emit = defineEmits<EmitType>()
const fontList = ref([
  { val: 16, name: "小" },
  { val: 20, name: "中" },
  { val: 24, name: "大" },
]);
const iconStyle = computed(() => ({
  fontSize: "16px", // 设置图标大小
  color: "#999", // 设置图标颜色
}));
const fontSize = ref<number>(16);
const route = useRoute();
const id = ref<string | string[]>();
// 点击改变字体大小
const toChangeSize = (val: number) => {
  fontSize.value = val;
};
// 点击预览
const Preview = (item: any) => {
  var path = item.url
  if (item.ext === 'jpg' || item.ext === 'png' || item.ext === 'jpeg') {
    window.open(path, '_blank')
  } else {
    window.open(path, '_blank')
  }
}
// 点击下载
const Download = (url: string, name: string) => {
  const a = document.createElement('a')
  fetch(url)
    .then(res => res.blob())
    .then(blob => {
      // 将链接地址字符内容转变成blob地址
      a.href = URL.createObjectURL(blob)
      a.download = name // 下载文件的名字
      document.body.appendChild(a)
      a.click()
    })
}
onMounted(() => {
  // emit('backTopHandle')
  console.log(route.params.id);
  id.value = route.params.id;
  document.querySelectorAll("img").forEach(function (img) {
    img.style.width = "100%";
    img.style.height = "auto"; // 保持宽高比
  });
  document.querySelectorAll("video").forEach(function (img) {
    img.style.width = "100%";
    img.style.height = "auto"; // 保持宽高比
  });
});
</script>
<style lang="scss" scoped>
.msg-list-box {
  .msg-compair-box {
    width: 100%;
    height: calc(100% - 80px);
    padding: 30px 40px;
    overflow-y: scroll;
    box-sizing: border-box;

    .title-box {
      font-family: Bold;
      font-size: 34px;
      color: #333333;
      text-align: justify;
    }

    .user-date-size {
      font-family: "Regular";
      font-size: 0.875rem;
      color: #999;
      padding: 1.25rem 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .date-align-items {
        text-align: center;
      }

      .font-size-box {
        width: 1.875rem;
        height: 1.875rem;
        border-radius: 50%;
        border: 1px solid #e4e4e4;
        color: #666;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.625rem;
      }

      .font-size-box:hover {
        background-color: #f0f0f0;
      }

      .font-is-active {
        background-color: #999;
        border: 1px solid #999;
        color: var(--el-color-white);
      }

      .font-is-active:hover {
        background-color: #999;
        border: 1px solid #999;
        color: var(--el-color-white);
      }
    }

    .msg-show-box {
      padding: 30px 0;
      font-family: "Regular";
      text-align: justify;
      line-height: 2rem;
      border-top: 1px solid #e4e4e4;
      cursor: pointer;
    }
  }

  .bottom-title-box {
    padding: 2.5rem 0;
    box-sizing: border-box;
    color: #999;

    .title-width-box {}

    .padding-top-box {
      margin-top: 1.25rem;
    }

    .width-title-box {
      width: calc(100% - 3rem);
    }

    .next-page-box {
      width: 3rem;
    }

    label {
      color: #666;
      margin-left: 0.8rem;
      cursor: pointer;
    }

    label:hover {
      color: var(--el-color-primary);
    }

    .return-btn-box {
      background-color: #f3f3f3;
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.125rem;
      width: 8.5rem;
      cursor: pointer;

      .el-icon {
        margin-right: 0.25rem;
      }
    }

    .return-btn-box:hover {
      background-color: var(--el-color-primary);
      color: var(--el-color-white);
    }

    .return-btn-box:hover .el-icon {
      color: var(--el-color-white) !important;
    }
  }

  // 评论区
  .hl-comment-box {
    padding: 1.25rem 0;
    font-family: "Bold";
  }

  .comment-list-box {
    width: 100%;
    position: relative;
    padding-top: 2rem;
    padding-bottom: 1rem;

    // border-bottom: 1px solid #e4e4e4;
    .user-avatar-box {
      width: 3.75rem;
      height: 3.75rem;
      margin-right: 1.5rem;

      .el-avatar {
        width: 3.25rem;
        height: 3.25rem;
      }
    }

    .page-box {
      padding-top: 1rem;
      display: flex;
      justify-content: center;
    }
  }

  .return-font-box {
    .user-avatar-box {
      opacity: 0;
    }

    .comment-bg-box {
      background: #f5f5f5;
      border-radius: 0.25rem;
      width: 100%;
      margin-top: 1rem;
      padding: 1.25rem;
      box-sizing: border-box;
      border: 1px solid red;

      max-height .comment-vue-list {
        padding-bottom: 1rem;
        border-bottom: 1px solid #e4e4e4;
        padding-top: 1rem;
      }

      .padding-top-none {
        padding-top: 0;
      }

      .padding-bottom-none {
        padding-bottom: 0;
        border-bottom: none;
      }
    }
  }
}

.fileBox {
  display: flex;

  .title {
    // font-size: 16px;
    // font-weight: bold;
    // color: #333333;
    // margin-top: 20px;
    // margin-bottom: 20px;
  }

  .lists {
    flex: 1;
    padding: 0 15px;

    .item {
      display: inline-block;
      width: 295px;
      height: 32px;
      line-height: 38px;
      background: #F9F9F9;
      border-radius: 4px;
      padding: 0 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      vertical-align: middle;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;

      .fileInfo {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0px;
        .el-image {
          display: flex;
          align-items: center;
        }

        div {
          margin-left: 10px;
          flex: 1;
          color: #333333;
          
          display: flex;
          align-items: center;
          span:first-of-type{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            max-width: 106px;
          }
        }
      }

      .btnBox {
        display: flex;
        align-items: center;

        span {
          color: #B52427;
          cursor: pointer;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
<style>
.msg-show-box img {
  width: 100%;
  display: inline-block;
}
.msg-show-box video {
  width: 100%;
  display: inline-block;
}
</style>
